<template>
  <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#fff"
           active-text-color="#4DE6CD" @select="handleSelect" :router="true" :class="{ 'scrolled': isScrolled }"
           style="position: fixed; top: 0; z-index: 1000; transition: all 0.3s ease;">
    <el-menu-item index="/">
      <el-icon>
        <HomeFilled/>
      </el-icon>
      galgalgal
    </el-menu-item>
    <el-menu-item v-for="item in menuList" :key="item.id" :index="item.menuUrl">
      <el-icon>
        <component :is="item.menuIcon"/>
      </el-icon>
      {{ item.menuName }}
    </el-menu-item>
    <el-menu-item index="/zaTan">
      <el-icon>
        <Collection/>
      </el-icon>
      归档
    </el-menu-item>
    <el-menu-item index="/coc/cocrw">
      <el-icon>
        <Collection/>
      </el-icon>
      COC
    </el-menu-item>
    <el-sub-menu index="6">
      <template #title>
        <el-icon>
          <CollectionTag/>
        </el-icon>
        分类
      </template>
      <el-menu-item v-for="item in catlist" :key="item.id" @click="openDetail(item.categoryId)">
        {{ item.categoryName }}
      </el-menu-item>
    </el-sub-menu>
    <img src="@/assets/icon/icon.png" alt="jumping-icon" class="jump-image"
         :style="{ position: 'absolute', right: '12px', width: '36px', height: '45px' }">
  </el-menu>
</template>

<script lang="ts" setup>
import {ref, watchEffect, onMounted, onUnmounted} from 'vue'
import {listMenu} from "@/api/bk/menu.js";
import useCounter from '@/stores/counter'
import {listCategory} from "@/api/bk/category.js"
import {useRouter, useRoute} from 'vue-router';

const route = useRoute()
const router = useRouter()

const counterStore = useCounter()

const activeIndex2 = ref(route.path)
const isScrolled = ref(false)
const lastScrollTop = ref(0)
const scrollDirection = ref('none')

// 处理滚动事件
const handleScroll = () => {
  // 检测滚动方向
  const currentScrollTop = window.scrollY || document.documentElement.scrollTop

  if (currentScrollTop > lastScrollTop.value) {
    scrollDirection.value = 'down'
  } else if (currentScrollTop < lastScrollTop.value) {
    scrollDirection.value = 'up'
  }

  lastScrollTop.value = currentScrollTop <= 0 ? 0 : currentScrollTop

  // 当滚动超过100px时改变导航栏样式，但在向上滚动时立即显示
  if (scrollDirection.value === 'up' && currentScrollTop < 300) {
    isScrolled.value = false
  } else if (currentScrollTop > 100) {
    isScrolled.value = true
  } else {
    isScrolled.value = false
  }
}

// 使用防抖函数优化滚动事件处理
const debounce = (fn: Function, delay: number) => {
  let timer: number | null = null
  return function (...args: any[]) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay) as unknown as number
  }
}

const debouncedScroll = debounce(handleScroll, 10)

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', debouncedScroll, {passive: true})
  // 初始检查
  handleScroll()
})

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', debouncedScroll)
})

const handleSelect = (index) => {
  console.log(index)
  activeIndex2.value = index
}
watchEffect(() => {
  activeIndex2.value = route.path
})

const menuList = ref([])
const catlist = ref([])
const queryParams = ref({
  menuState: 0,
})
const queryCat = ref({
  categoryStatus: 0,
})
// 菜单请求
const getList = () => {
  listMenu(queryParams.value).then((response) => {
    menuList.value = response.rows
  })
  console.log(counterStore.count);
}
// 分类
const getcatlist = () => {
  listCategory(queryCat.value).then((response) => {
    catlist.value = response.rows
  })
}

const openDetail = (id) => {
  // 新窗口打开
  const url = router.resolve({
    name: 'Fll',
    params: {id} // 传递参数
  }).href;
  window.open(url, '_blank');
};

getList()
getcatlist()
</script>

<style lang="scss" scoped>
/* 添加导航栏状态变化时的动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 基本导航栏样式 */
.el-menu-demo {
  width: 100%;
  height: 50px;
  // background-color: rgba(117, 117, 117, 0.7) !important;
  background: linear-gradient(180deg, // 渐变角度（可调）
      rgba(94, 94, 94, 0.8), // 起始颜色（蓝紫色调）
      rgba(94, 94, 94, 0.01) // 结束颜色（粉色调）
  ) !important;
  border-bottom: none !important;
  transition: all 0.3s ease;
}

/* 滚动后的导航栏样式 */
.el-menu-demo.scrolled {
  margin-top: 5px;
  left: 200px;
  right: 200px;
  width: auto;
  height: 45px;
  background-color: rgba(117, 117, 117, 0.3) !important;
  border-radius: 30px;
  top: 6px;
}

/* 去掉激活菜单项底部的颜色条 */
.el-menu .el-menu-item.is-active {
  border-bottom: none !important;
  background-color: transparent !important;
  color: #4DE6CD !important;
  position: relative;
  /* 确保激活状态的文字颜色 */
}

/* 为激活项添加微妙动画效果 */
.el-menu .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 5px;
  height: 5px;
  background-color: #4DE6CD;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px #4DE6CD;
  transition: all 0.3s ease;
}

.el-menu.scrolled .el-menu-item.is-active::after {
  bottom: 8px;
}

/* 修复悬浮时的背景和字体颜色问题 */
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-sub-menu:not(.is-disabled):hover .el-submenu__title {
  background-color: rgba(77, 230, 205, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* 处理菜单项的圆角问题 - 仅在滚动状态下应用 */
.el-menu-demo.scrolled > .el-menu-item:first-child {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  overflow: hidden;
  padding-left: 20px;
  transition: padding 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.el-menu-demo.scrolled > .el-sub-menu:last-of-type {
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
  overflow: hidden;
  padding-right: 15px;
  transition: padding 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 子菜单项的样式 */
.el-menu--horizontal .el-menu .el-menu-item {
  color: #333 !important;
  background-color: #fff;
}

.el-menu--horizontal .el-menu .el-menu-item:hover {
  background-color: #f0f0f0 !important;
  color: #4DE6CD !important;
}

/* 确保当前选中的子菜单项也显示正确的颜色 */
.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #4DE6CD !important;
}

/* 子菜单容器样式 */
.el-menu--popup {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 跳动动画 */
@keyframes jump {
  0% {
    transform: translateY(0) rotate(0);
  }

  30% {
    transform: translateY(-20px) rotate(-5deg);
  }

  60% {
    transform: translateY(-10px) rotate(3deg);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.jump-image {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.9;
}

.jump-image:hover {
  animation: jump 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.2)) brightness(1.2);
  opacity: 1;
}

/* 为滚动状态的图标添加特殊效果 */
.scrolled .jump-image {
  transform: scale(0.9);
}
</style>